import React from 'react'
import {Layout,Menu} from 'antd'
import {HomeOutlined,FileSyncOutlined} from '@ant-design/icons';
import {useNavigate} from 'react-router-dom'
import routes from '../config/router';
const {Sider}=Layout
export default function MySider() {
  const nav=useNavigate()
  const go=({key})=>{
    nav(key)
  }
  const renderMenu=(routes)=>{
    console.log('routes',routes);
    //从localStorage中获取userInfo信息
    let userInfo=JSON.parse(localStorage.getItem("userInfo"))
    console.log('该用户的角色',userInfo.role.name);
    //过滤routes
    console.log('过滤后的routes',routes.filter(item=>!item.roles||item.roles.includes(userInfo.role.name))); 
    return routes.filter(item=>!item.roles||item.roles.includes(userInfo.role.name)).map((item,index)=>{
      //将item进行解构
      console.log('item',item);
      const {key,icon,title,subMenuKey,subMenuTitle,children}=item
      /*
        下面的if结构中拼的是Menu.Item，else结构中拼的是Menu.SubMenu
      */
      if(!subMenuKey){
        return <Menu.Item key={key} icon={icon}>{title}</Menu.Item>
      }else{
        return <Menu.SubMenu key={subMenuKey} icon={icon} title={subMenuTitle}>
           {renderMenu(children)}
        </Menu.SubMenu>
      }
    })

  }
  return (
    <Sider className='siderBox'>
        <Menu 
            theme='dark' 
            mode='inline'
            defaultOpenKeys={['sub1','sub2']}
            defaultSelectedKeys={['1']}
            onClick={go}>
            {/* <Menu.Item key="/" icon={<HomeOutlined />}>系统主页</Menu.Item>
            <Menu.SubMenu key="sub1" icon={<FileSyncOutlined />} title="系统管理">
                <Menu.Item key="/home/user">用户管理</Menu.Item>
                <Menu.Item key="/home/role">角色管理</Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu key="sub2" icon={<FileSyncOutlined />} title="商品管理">
                <Menu.Item key="/home/product/list">商品管理</Menu.Item>
                <Menu.Item key="/home/product/category">分类管理</Menu.Item>
            </Menu.SubMenu>
            <Menu.Item key="/home/shop" icon={<HomeOutlined />}>店铺管理</Menu.Item>
            <Menu.SubMenu key="sub3" icon={<FileSyncOutlined />} title="统计报表">
                <Menu.Item key="/home/datav/market">市场统计</Menu.Item>
                <Menu.Item key="/home/datav/sale">销售统计</Menu.Item>
            </Menu.SubMenu> */}
            {renderMenu(routes)}
        </Menu>
    </Sider>
  )
}
